import React from 'react';
import { InfoTipsC } from '../../../comps';
import { ExclamationCircleFilled } from '@ant-design/icons';
import Style from './style.less';
import moment from 'moment';
class Introduction extends React.Component {
  constructor() {
    super();
    this.state = {
      productList: null,
      timeShow: '',
    };
  }
  componentDidMount() {
    const { time, storeName } = this.props;
    this.setState({
      productList: storeName.portfolioCodeListName ? storeName.portfolioCodeListName.join('、') : '',
      timeShow: time ? moment(time, 'YYYYMMDD').format('YYYY-MM-DD') : '',
    });
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.storeName) != JSON.stringify(this.props.storeName)) {
      this.setState({
        productList: nextProps.storeName.portfolioCodeListName ? nextProps.storeName.portfolioCodeListName.join('、') : '',
      });
    }
    if (JSON.stringify(nextProps.time) != JSON.stringify(this.props.time)) {
      this.setState({
        timeShow: nextProps.time ? moment(nextProps.time, 'YYYYMMDD').format('YYYY-MM-DD') : '',
      });
    }
  }
  leftContent = () => {
    const { productList } = this.state;
    return (
      <div>
        <span style={{ fontWeight: 'normal', whiteSpace: 'normal' }}>产品：{productList}</span>
      </div>
    );
  };
  render() {
    const { timeShow } = this.state;
    return (
      <>
        <div name={'xjgl-pdf'} style={{ marginBottom: '16px' }}>
          <div style={{ position: 'relative', textAlign: 'center' }}>
            <span style={{ fontSize: '24px', fontWeight: 'bold' }}>现金管理理财新规报告{this.props.type == 2 && '（试算）'}</span>
            {this.props.type == 2 && <span style={{ position: 'absolute', left: '0px', top: '30px' }}>基于T-1日日终数据试算</span>}
            <span style={{ position: 'absolute', right: '90px', top: '8px' }}>{this.props.msgInfo}</span>
            <span style={{ position: 'absolute', right: '0px', top: '8px' }}>{timeShow}</span>
            {this.props.hasWaring ? (
              <span className={Style.waring}>
                <ExclamationCircleFilled />
                {`有${this.props.hasWaring}条严重预警条目`}
              </span>
            ) : null}
          </div>
        </div>
        <div name={'xjgl-pdf'} style={{ marginBottom: '16px' }}>
          <InfoTipsC height='auto' Left={this.leftContent()} style={{ padding: '10px 20px', width: '100%' }}></InfoTipsC>
        </div>
      </>
    );
  }
}
export default Introduction;
